<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" *ngIf="loaded" (click)="showChatUsers()" [ariaLabel]="'core.users' | translate">
                <ion-icon name="fas-users" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="loaded">
        <ion-list class="addon-messages-discussion-container" aria-live="polite">
            <ng-container *ngFor="let message of messages; index as index; last as last">

                <p class="ion-text-center addon-messages-date" *ngIf="message.showDate">
                    {{ message.timestamp * 1000 | coreFormatDate: "strftimedayshort" }}
                </p>

                <div class="ion-text-center addon-mod_chat-notice" *ngIf="message.special">
                    <ion-badge class="ion-text-wrap" color="success" *ngIf="message.system && message.message === 'enter'">
                        <span>
                            <ion-icon name="fas-right-to-bracket" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageenter' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="danger" *ngIf="message.system && message.message === 'exit'">
                        <span>
                            <ion-icon name="fas-right-from-bracket" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageexit' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="primary" *ngIf="message.beep === 'all'">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messagebeepseveryone' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="primary"
                        *ngIf="message.userid !== currentUserId && message.beep === currentUserId">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messagebeepsyou' | translate:{$a: message.userfullname} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="light"
                        *ngIf="message.userid === currentUserId && message.beep && message.beep !== 'all'">
                        <span>
                            <ion-icon name="fas-bell" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }}
                        </span>
                    </ion-badge>

                    <ion-badge class="ion-text-wrap" color="info" *ngIf="!message.system && !message.beep">
                        <span>
                            <ion-icon name="fas-asterisk" aria-hidden="true" />
                            {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
                            <strong>
                                {{ message.userfullname }} <core-format-text [text]="message.message" contextLevel="module"
                                    [contextInstanceId]="cmId" [courseId]="courseId" (afterRender)="last && scrollToBottom()" />
                            </strong>
                        </span>
                    </ion-badge>
                </div>

                <core-message *ngIf="!message.special" [message]="message" [user]="message" [text]="message.message"
                    [time]="message.timestamp * 1000" (afterRender)="last && scrollToBottom()" contextLevel="module" [instanceId]="cmId"
                    [courseId]="courseId" />
            </ng-container>
        </ion-list>

        <core-empty-box *ngIf="!messages || messages.length <= 0" icon="far-comments" [message]="'addon.mod_chat.nomessages' | translate" />
    </core-loading>
</ion-content>
<ion-footer class="footer-adjustable">
    <ion-toolbar [color]="isOnline && polling && loaded ? null : 'light'">
        <p class="ion-text-center" *ngIf="!isOnline">
            {{ 'addon.mod_chat.mustbeonlinetosendmessages' | translate }}
        </p>

        <core-send-message-form [sendDisabled]="sending" *ngIf="isOnline && polling && loaded" [message]="newMessage"
            (onSubmit)="sendMessage($event)" [placeholder]="'addon.messages.newmessage' | translate" />

        <ion-button *ngIf="isOnline && !polling && loaded" (click)="reconnect()" expand="block" fill="outline">
            {{ 'core.login.reconnect' | translate }}
        </ion-button>
    </ion-toolbar>
</ion-footer>
